{#{% load static %}#}
<!DOCTYPE html>
<html lang="en">

<head>
    {% block page-title %}
        <title>刘飞的个人站点</title>
    {% endblock %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/static/image/dog.jpg">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <style>
        .fakeimg {
            height: 200px;
            background: #aaa;
        }
    </style>
    <style>
        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

        {#        返回顶部#}
        #btnTop {
            width: 40px;
            height: 40px;
            display: block;
            background: url(/static/image/top.png) no-repeat center #006000;
            right: 20px;
            bottom: 10%;
            position: fixed
        }

        #btnTop:hover {
            background-color: #1E90FF;
        }
    </style>
</head>
<body onload="timer()">
<!--头部标题开始-->
<div class="jumbotron text-center text-sm-center text-xl-center text-lg-center header" style="margin-bottom:0">
    <!--<marquee behavior="alternate" direction="right">-->
    <span class="liufei masked">刘飞</span>
    <span>个人站点</span>
    <!--</marquee>-->
</div>
<!--头部标题结束-->
{% block page-daohang %}
    {% include 'daohang.html' %}
{% endblock %}

<!--弹幕开始-->
{% block page-danmu %}
    <div class="container">
        <div>
            <marquee behavior="scroll" direction="left" id="blink"><img src="/static/image/dog.jpg" alt=""
                                                                        height="16px">&nbsp;&nbsp;&nbsp;因为房价高，所以需要更努力
            </marquee>
        </div>
    </div>
{% endblock %}
<!--弹幕结束-->
<!--内容主题开始-->
{% block page-content %}
    <div class="container" style="margin-top:16px">
        <div class="row">
            <!--左边栏-->
            <div class="col-sm-8" style="margin-top: 10px">
                {% block page-left-content %}
                {% endblock %}

            </div>
            <!--右边栏-->
            <div class="col-sm-4" style="margin-top: 10px">
                {% block page-right-content %}
                    <div class="card bg-info text-white" style="margin-bottom: 10px">
                        <div class="card-body">
                            <a href="javascript:;" class="card-link" data-trigger="hover" data-toggle="popover"
                               data-placement="bottom" data-html="true"
                               data-content="<img src='/static/image/wx03.png'>"><img
                                    src="/static/image/weixin.png" alt="" style="height: 40px;width: 40px;"></a>
                            <a href="javascript:;" class="card-link" data-trigger="hover" data-toggle="popover"
                               data-placement="bottom" data-html="true"
                               data-content="<img src='/static/image/qq02.png'>"><img
                                    src="/static/image/qq.png" alt="" style="height: 40px;width: 40px;"></a>
                            <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=867940410@qq.com"
                               target="_blank"
                               class="card-link" data-toggle="popover" data-trigger="hover" data-content="给我发邮件"
                               data-placement="top"><img src="/static/image/email.png" alt=""
                                                         style="height: 40px;width: 40px;"></a>

                        </div>

                    </div>
                    {% block page-about %}
                        <div class="card bg-info text-white" style="margin-bottom: 10px">
                            <div class="card-body">
                                <h5 class="card-title">关于网站</h5>
                                <hr>
                                <p class="card-text">此网站主要为练习Python编程技能所建，内容涉及网络爬虫，如有侵权，请联系博主删除。</p>
                            </div>
                        </div>
                    {% endblock %}
                    {% block page-table %}
                        <table class="table table-sm">
                            <thead class="thead-light text-center text-sm-center text-xl-center text-lg-center">
                            <tr>
                                <th colspan="2">网站架构</th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr class="table-primary">
                                <td>网站设计:</td>
                                <td>刘飞</td>
                            </tr>
                            <tr class="table-success">
                                <td>前端框架:</td>
                                <td>Bootstrap4</td>
                            </tr>
                            <tr class="table-danger">
                                <td>后端框架:</td>
                                <td>Django</td>
                            </tr>
                            <tr class="table-info">
                                <td>后端语言:</td>
                                <td>Python</td>
                            </tr>
                            <tr class="table-warning">
                                <td>数据库技术:</td>
                                <td>MySQL</td>
                            </tr>
                            <tr class="table-active">
                                <td>服务器部署:</td>
                                <td>Ubuntu+Nginx+Uwsgi</td>
                            </tr>
                            <tr class="table-active">
                                <td>网站运行时间:</td>
                                <td id="timer"></td>
                            </tr>
                            </tbody>
                        </table>
                    {% endblock %}
                    {% block page-biaoqian %}
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">标签云</h4>
                                <a href="javascript:;" class="btn btn-info btn-sm" style="margin-top: 10px" data-toggle="popover"
                                   data-placement="top" data-trigger="hover" data-content="(123)个话题" role="button">信息
                                    <span>(123)</span></a>

                            </div>
                        </div>
                    {% endblock %}
                {% endblock %}
            </div>
            <hr class="d-sm-none">
        </div>
    </div>
{% endblock %}
<!--内容主题结束-->
{#返回顶部#}
<div>
    <a href="javascript:;" id="btnTop"></a>
</div>
<!--底部开始-->
<div class="jumbotron text-center text-sm-center text-xl-center text-lg-center"
     style="margin-bottom:0;margin-top: 20px">
    备案号：<a href="http://www.beian.miit.gov.cn" target="_blank">豫ICP备19019414号</a>
</div>
<!--底部结束-->
<!--js文件引入-->
{#百度jscnd库#}
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
{#官方cdn库#}
{#<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>#}
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/layer/layer.js"></script>
{#返回顶部#}
<script>
    $(function () {
        $('#btnTop').hide();
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 200) {
                    $('#btnTop').fadeIn(200);
                }
                else {
                    $('#btnTop').fadeOut(200);
                }

            });
            $('#btnTop').click(function () {

                $('body,html').animate({scrollTop: 0}, 300);
                return false;

            })

        })

    })
</script>
<!--弹幕字体颜色变化-->
<script language="javascript">
    function changeColor() {
        var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
        color = color.split("|");
        document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
    }
    setInterval("changeColor()", 1000);
</script>
<!--网站运行时间统计-->
<script>
    function timer() {
        var ts = (new Date()) - (new Date("3/15/2020 00:00:00"));//计算剩余的毫秒数
        var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
        var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
        var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
        var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
        dd = checkTime(dd);
        hh = checkTime(hh);
        mm = checkTime(mm);
        ss = checkTime(ss);
        document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
        setInterval("timer()", 1000);      //注释此行，不进行倒计时显示
    }
    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>
<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>
{#给我留言#}
<script>
    {#留言#}
    $(document).ready(function () {
        $('#submit').click(function () {
            $.post("/message/", $('form').serialize(), function (data) {
                if (data['status'] == 0) {
                    layer.msg(data['info'], {
                        time: 2000
                    });
                    location.href = "/message/"
                } else {
                    layer.msg(data['info'])
                }

            }, 'json')
        })

    })
</script>
</body>
</html>